<template>
  <div >
    <div style="height: 20px;border-left: 3px solid #0040ED">
      <div style="float: left;margin-left: 10px;font-size: 14px">
        <span>默认视图</span>&nbsp;
        <i class="el-icon-setting" style="cursor: pointer" @click="openFieldDialog"></i>

        <el-drawer
            title="列表配置"
            size="50%"
            :visible.sync="fieldPoolDrawer"
            :with-header="false">
          <div style="height: 40px;">
            <div style="margin-left: 20px;padding-top: 15px; ">
              <span style="font-size: 18px;">列表配置</span>
            </div>
            <div style="border-bottom: 1px solid #E8F0F3;height: 5px">
            </div>
          </div>
          <div style="height: calc(100vh - 110px);margin-top: 10px;width: 100%">
            <div style="display: flex;flex-direction: row;width: 100%" >
               <div style="width: 30%;height: calc(100vh - 110px);align-items: center">
                 <div style="margin-top: 20px;width: 100%;text-align: center">
                   <el-button @click="addConfig" style="width: 90%"><i class="el-icon-plus"></i>&nbsp;新建配置</el-button>
                 </div>
                 <div v-for="config in configs"
                      :style="{'border': nowConfig.id === config.id ?'1px solid #0040ED':'1px solid lightgray','margin-top': '12px','height':'60px','width': '90%','margin-left': '5%','cursor': 'pointer','padding-top':'5px'}"
                      @click="openConfig(config)">

                   <span style="font-weight: bold;font-size: 14px;padding: 5px">{{config.name}}</span>   <el-tag v-if="config.defaultFlag" size="mini">默认</el-tag><br/>
                   <span style="color: gray;padding: 5px">{{config.desc == null || config.desc.length < 15 ? config.desc : config.desc.substr(0,15) + "..."}}</span>
                 </div>

               </div>
               <div style="width: 70%;height: calc(100vh - 110px);border-left: 2px solid #E8F0F3">
                 <div style="margin-top: 20px;margin-left: 10px;display: flex;flex-direction: column">
                   <div style="width: 100%;height: 20px;" v-if="!nowConfig.defaultFlag">
                     <el-button size="mini" @click="removeConfig" type="primary" style="float: right;margin-right: 10%">删除</el-button>
                   </div>
                   <div style="flex: 1">
                     <div style="width: 200px;height: 20px">
                       <span >配置名称:</span>
                     </div>
                     <el-input v-model="nowConfig.name" placeholder="请输入配置名称" size="small" style="width: 90%"></el-input>
                   </div>
                   <div style="flex: 1;margin-top: 10px">
                     <div style="width: 200px;height: 20px">
                       <span>配置描述:</span>
                     </div>
                     <el-input v-model="nowConfig.desc" placeholder="请输入配置描述" type="textarea" size="small" rows="4" style="width: 90%"></el-input>
                   </div>
                   <div style="flex: 1;margin-top: 10px;">
                     <span style="width: 200px">配置列表:</span>
                     <el-table
                         :data="nowConfig.fields"
                         height="calc(100vh - 350px)"
                         style="width: 100%">
                       <el-table-column
                           prop="label"
                           label="属性"
                           width="100">
                       </el-table-column>
                       <el-table-column
                           prop="width"
                           label="列宽"
                           width="100">
                       </el-table-column>
                       <el-table-column
                           prop="show"
                           label="是否显示">
                         <template slot-scope="scope">
                           <el-checkbox v-model="scope.row.show" :disabled="nowConfig.defaultFlag"></el-checkbox>
                         </template>
                       </el-table-column>

                     </el-table>

                   </div>


                 </div>
               </div>
            </div>
          </div>
          <div style="border-bottom: 1px solid #E8F0F3;height: 5px">
          </div>
          <div style="bottom: 10px;float: right;margin-right: 20px;margin-top:5px">
            <el-button size="medium" @click="cancelShowField">取消</el-button>
            <el-button size="medium" type="primary" @click="saveShowField" :loading="saveLoading">保存</el-button>
          </div>
        </el-drawer>
      </div>

      <div>
        <slot name="operate"></slot>
      </div>
    </div>
  </div>
</template>

<script>

import { utils } from '../../utils/Util';
import {addData,getUserData} from '@/api/userdata';
export default {
  props:{
    fields:Array,
    fieldData:Object,
  },
  components:{
  },
  data(){
    return {
      baseFields:JSON.parse(JSON.stringify(this.fields)),
      saveLoading:false,
      fieldPoolDrawer:false,
      closeFlag: true,
      configs:[],
      nowConfig:{
        id:'',
        name:'',
        desc:'',
        fields:[]
      },
      field:{
        label:"",
        prop:"",
        width:150,
        show:true
      },
      defaultConfig:{
        id: utils.getUUID(),
        defaultFlag:true,
        nowUsed:false,
        name:'默认视图',
        desc:'默认视图,显示所有字段',
        fields:JSON.parse(JSON.stringify(this.fields))
      }
    }
  },
  created(){
    this.initConfigs();
  },

  methods:{
    async initConfigs(){
      this.configs.push(this.defaultConfig);
      await this.getConfigs();
      let used = this.configs.filter(config => config.nowUsed);
      if(used.length > 0){
        this.nowConfig = used[0];
      }else{
        this.nowConfig = this.defaultConfig;
      }

      let nowUsedConfig = this.configs.filter(config => config.nowUsed);
      if(nowUsedConfig.length > 0){
        this.$emit('success',JSON.parse(JSON.stringify(nowUsedConfig[0].fields)));
      }else{
        this.$emit('success',JSON.parse(JSON.stringify(this.defaultConfig.fields)));
      }
    },
    async getConfigs(){
      let res = await getUserData(this.fieldData);
      if(res.code === '200'){
        if(res.data != null && res.data.content != null){
          let content = JSON.parse(res.data.content);
          if(content != null && content.length > 0){
            for(let con of content){
              this.configs.push(con);
            }
          }
        }
      }
    },
    removeConfig(){
      this.configs = this.configs.filter(config => config.id !== this.nowConfig.id);
    },
    addConfig(){
      let now = new Date();
      let newConfig = {
        id: utils.getUUID(),
        name:now.getMonth()+"-"+now.getDay()+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds(),
        desc:'',
        nowUsed:false,
        fields:this.baseFields
      }
      this.configs.push(newConfig);
    },
    openConfig(config){
      this.nowConfig = config;
      this.configs.forEach(config => {
        config.nowUsed = false;
      })
      config.nowUsed = true;
    },
    openFieldDialog(){
      this.fieldPoolDrawer = true;
      this.saveLoading = false;
    },
    cancelShowField(){
      this.fieldPoolDrawer = false;
    },
    async saveShowField(){
      this.saveLoading = true;
      let saveConfigs = this.configs.filter(config => !config.defaultFlag);
      this.fieldData.content = JSON.stringify(saveConfigs);
      let ret = await addData(this.fieldData);
      if(ret.code === '200'){
        this.$message.success("保存成功");

        this.$emit('success',JSON.parse(JSON.stringify(this.nowConfig.fields)));
      }else{
        this.$message.error("保存失败");
      }
      this.fieldPoolDrawer = false;
    }

  }
}
</script>
<style lang="scss" scoped>

.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
</style>